<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>滴答办公系统-资源列表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
		<script src="media/js/jquery.min.js"></script>
	</head>

	<body>
		<div class="layui-container">
			<div class="layui-btn-group">
				<button class="layui-btn layui-btn-norma" onclick="addAuth()">
				<i class="layui-icon">&#xe654;</i>添加权限
			</button>
			</div>
		</div>
		<div class="layui-container">
			<table class="layui-table" id="tbdata" lay-filter="tbop">
				<thead>
					<tr>
						<td>序号</td>
						<td>名称</td>
						<td>页面路径</td>
						<td>图标</td>
						<td>级别</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>权限管理</td>
						<td></td>
						<td>fa-shield</td>
						<td>一级菜单</td>
						<td>
							<a class="layui-btn layui-btn-mini" href="javascript:updateMenu1();">编辑</a>
							<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" onclick="deleteMenus();">删除</a>
						</td>
					</tr>
					<tr>
						<td>2</td>
							<td>考勤管理</td>
							<td></td>
							<td>fa-bell-o</td>
							<td>一级菜单</td>
							<td>
								<a class="layui-btn layui-btn-mini" href="javascript:updateMenu1();">编辑</a>
								<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" onclick="deleteMenus();">删除</a>
							</td>
					</tr>
					<tr>
						<td>3</td>
						<td>员工管理</td>
						<td></td>
						<td>fa-bell-o</td>
						<td>一级菜单</td>
						<td>
							<a class="layui-btn layui-btn-mini" href="javascript:updateMenu1();">编辑</a>
							<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" onclick="deleteMenus();">删除</a>
						</td>
					</tr>
					<tr>
						<td>4</td>
						<td>员工列表</td>
						<td>/emp/list</td>
						<td>fa-bell-o</td>
						<td>二级菜单</td>
						<td>
							<a class="layui-btn layui-btn-mini" href="javascript:updateMenu2();">编辑</a>
							<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" onclick="deleteMenus();">删除</a>
						</td>
					</tr>
					<tr>
						<td>5</td>
						<td>员工新增</td>
						<td>/emp/add</td>
						<td>fa-bell-o</td>
						<td>二级菜单</td>
						<td>
							<a class="layui-btn layui-btn-mini" href="javascript:updateMenu2();">编辑</a>
							<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" onclick="deleteMenus();">删除</a>
						</td>
					</tr>
					<tr>
						<td>6</td>
						<td>员工导入</td>
						<td>/emp/import</td>
						<td>fa-bell-o</td>
						<td>二级菜单</td>
						<td>
							<a class="layui-btn layui-btn-mini" href="javascript:updateMenu2();">编辑</a>
							<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" onclick="deleteMenus();">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
				<a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">
					<i class="layui-icon">&lt;</i>
				</a>
				<span style="color:#009688;font-weight: bold;">1</span>
				<a href="#">2</a>
				<a href="#">3</a>
				<a href="#">4</a>
				<a href="#">5</a>
				<a href="javascript:;" class="layui-laypage-next layui-disabled" data-page="2">
					<i class="layui-icon">&gt;</i>
				</a>
				<span class="layui-laypage-skip">到第
							   <input type="text" min="1" value="1" class="layui-input">页
								<button type="button" class="layui-laypage-btn">确定</button>
							</span>
				<span class="layui-laypage-count">共 1 条</span>
				<span class="layui-laypage-limits"> 
							    <select lay-ignore="">
							        <option value="10" selected="">10 条/页</option>
									<option value="20">20 条/页</option>
									<option value="30">30 条/页</option>
									<option value="40">40 条/页</option>
									<option value="50">50 条/页</option>
									<option value="60">60 条/页</option>
									<option value="70">70 条/页</option>
									<option value="80">80 条/页</option>
									<option value="90">90 条/页</option>
							</select>
							</span>
			</div>
		</div>

		<script src="media/layui/layui.js"></script>

		<script type="text/javascript">
			function deleteMenus() {
				layui.use('table', function() {
					layer.confirm('是否确认删除菜单?', function(index) {
						layer.msg("删除成功", {
							icon: 6
						});
						layer.msg("删除失败", {
							icon: 5
						});
					});
				});
			}
			
			var form;

			function addAuth() {
				layui.use('table', function() {
					form=layui.form;
					form.on('radio(level)', function (data) {
						changePid(data.value);
					});
					layer.open({
						area: ['500px', '380px'],
						title: '权限页面新增',
						type: 1,
						content: $('#dvlay'), //这里content是一个普通的String
						btn: ['新增', '取消'],
						cancel: function() {}
					});
				});
			}
			
			function changePid(i) {
				$("#dvl1").css("display", "block");
				form.render();
				if(i == -1) {
					$.get("authorityroot.do", null, function(arr) {
						for(i = 0; i < arr.length; i++) {
							$("#spid").append("<option value=\"" + arr[i].id + "\">" + arr[i].title + "</option>");
						}
						$("#dvl1").css("display", "block");
						form.render();
					});
				} else {
					$("#dvl1").css("display", "none");
					$("#pid").val(i);
				}
			}

			function setPid(obj) {
				$("#pid").val(obj.value());
			}
			
			//更新1级菜单
			function updateMenu1() {
				layui.use('table', function() {
					form=layui.form;
					layer.open({
						area: ['500px', '380px'],
						title: '一级菜单更新',
						type: 1,
						content: $('#dvupdate1'), //这里content是一个普通的String
						btn: ['更新', '取消'],
						cancel: function() {}
					});
				});
			}
			
			
			//更新2级菜单
			function updateMenu2() {
				layui.use('table', function() {
					form=layui.form;
					layer.open({
						area: ['500px', '380px'],
						title: '二级菜单更新',
						type: 1,
						content: $('#dvupdate2'), //这里content是一个普通的String
						btn: ['更新', '取消'],
						cancel: function() {}
					});
				});
			}
			
		</script>

	</body>

</html>

<div style="display: none;margin-top: 10px;width: 480px" id="dvlay">
	<form id="fm1" class="layui-form ">
		<div class="layui-form-item">
			<label class="layui-form-label">名称：</label>
			<div class="layui-input-inline">
				<input name="title" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图标：</label>
			<div class="layui-input-inline">
				<input name="aicon" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">路径：</label>
			<div class="layui-input-inline">
				<input name="aurl" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">级别：</label>
			<div class="layui-input-inline">
				<input type="radio" name="pid" value="0" lay-filter="level" title="一级" checked>
				<input type="radio" name="pid" value="-1" lay-filter="level" title="二级">
			</div>
		</div>
		<input type="hidden" name="parentId" id="pid">
		<div class="layui-form-item" id="dvl1" style="display: none">
			<label class="layui-form-label">上级路径：</label>
			<div class="layui-input-inline">
				<select onselect="setPid(this)" id="spid">
                    <option id="1">权限管理</option>
                    <option id="2">菜单管理</option>
				</select>

			</div>
		</div>
	</form>
</div>


<div style="display: none;margin-top: 10px;width: 480px" id="dvupdate1">
	<form id="fm1" class="layui-form ">
		<div class="layui-form-item">
			<label class="layui-form-label">名称：</label>
			<div class="layui-input-inline">
				<input name="title" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图标：</label>
			<div class="layui-input-inline">
				<input name="aicon" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">路径：</label>
			<div class="layui-input-inline">
				<input name="aurl" class="layui-input">
			</div>
		</div>
	</form>
</div>


<div style="display: none;margin-top: 10px;width: 480px" id="dvupdate2">
	<form id="fm1" class="layui-form ">
		<div class="layui-form-item" id="dvl1">
			<label class="layui-form-label">上级路径：</label>
			<div class="layui-input-inline">
				<select onselect="setPid(this)" id="spid">
                    <option id="1">权限管理</option>
                    <option id="2">菜单管理</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">名称：</label>
			<div class="layui-input-inline">
				<input name="title" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图标：</label>
			<div class="layui-input-inline">
				<input name="aicon" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">路径：</label>
			<div class="layui-input-inline">
				<input name="aurl" class="layui-input">
			</div>
		</div>
	</form>
</div>